<template>
  <div>
    <!-- 
      <import-item :delRow="delRow" :excel-address="excelAddress" :table-column="tableColumn"  :api-url="apiUrl"
      :api-param="apiParam" :validate-data="validateData" :uni-key="uniKey" :handle-data="handleData" @success="success">
      </import-item>
      *************************************************
      *     props    *   类型   *     描述
      * delRow       * number   * 删除行
      * excelAddress * string   * 下载地址
      * tableColumn  * array    * 表格数据
      * apiUrl       * string   * api链接
      * apiParam     * obj      * 自定义数据
      * validateData * function * 格式校验
      * uniKey       * string   * 预前校验数据重复的
      * handleData   * function * 数据处理方法
      * success      * function * 成果返回调用方法
      *************************************************
      -->
    <div>
      <div class="loadStyle" v-if="!file">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-upload class="upload-demo" action="" :before-upload="handleBeforeUpload" accept=".xls, .xlsx">
              <el-button type="primary" size="medium">读取excel文件</el-button>
            </el-upload>
          </el-col>
          <el-col :span="12" :offset="0">
            <div class="right">
              <el-button type="primary" size="medium" @click="downloadSample">导入模板下载</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-else class="loadStyle">
        <el-button type="danger" size="medium" @click="handleRemove()" v-if="file.name" class="bml10"
          :loading="saveLoading">删除
        </el-button>
        <el-button type="primary" size="medium" @click="inExcel()" v-if="file.name &&!nextBtnDisabled" class="bml10"
          :disabled="nextBtnDisabled" :loading="saveLoading">导入</el-button>
        <el-button type="danger" size="medium" v-if="nextBtnDisabled" class="bml10">数据有误</el-button>
        <span style="font-size:1.5rem;margin-left:10px"> {{ file.name }} </span>
      </div>
    </div>
    <el-table :height="offsetHeight" :data="tableData" border stripe :cell-style="cellStyle" v-loading="loading">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column v-for="(col,index) in tableColumn" :prop="col.value" :label="col.label" min-width="200"
        :key="index">
      </el-table-column>
    </el-table>

    <!-- <vxe-table ref="xTable" border resizable highlight-hover-row :height="offsetHeight" size="medium"
      show-overflow="tooltip" align="center" header-align="center" :loading="loading"
      :tooltip-config="{theme:'light',enterable:true}" :sort-config="{trigger: 'cell'}" :cell-style="cellStyle"
      :data="tableData">

      <vxe-table-column>
      </vxe-table-column>
    </vxe-table> -->

  </div>
</template>

<script>
// import axios from 'axios'
import { saveExcelData } from '@/api/user.js'
import excel from '@/utils/excel/excel.js'
export default {
  props: {
    // 删除行
    delRow: {
      type: Number,
      default: () => {
        return 2
      }
    },
    // excel下载地址
    excelAddress: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 表格数据
    tableColumn: {
      type: Array,
      default: () => { }
    },
    // api链接
    apiUrl: {
      type: String,
      default: () => {
        return ''
      }
    },
    // api自定义添加数据
    apiParam: {
      type: Object,
      default: () => { }
    },
    // 格式校验
    validateData: {
      type: Function,
      default: (item, error, tName) => {
      }
    },
    // 预前校验数据重复的key
    uniKey: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 数据处理方法
    handleData: {
      type: Function,
      default: (item) => {
        return item
      }
    },
  },
  created () {
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 250,
      loading: false,
      saveLoading: false,
      tableData: [],
      saveTableData: [], // 接口使用的
      file: '',
      troubleName: 'trouble-cell', // 问题样式命名
      nextBtnDisabled: false, // 禁用标识
      troubleColor: { // 表格颜色
        cellColor: '#ED4014',
        cellBgColor: '#FFEFE6',
        cellRepeatColor: '#fff',
        cellRepeatBgColor: '#187'
      }

    }
  },
  mounted () {

  },
  methods: {
    // 移除上传文件
    handleRemove () {
      this.saveTableData = []
      this.initUpload()
      this.$tips.warning('上传的文件已删除！')
    },
    // 初始化上传状态
    initUpload () {
      this.file = null
      this.tableData = []
      this.tableTitle = []
      this.showProgress = false
      this.nextBtnDisabled = false
    },
    // 导入项目方法
    inExcel () {
      this.saveLoading = true
      this.loading = true
      // axios({
      //   method: 'post',
      //   url: this.apiUrl,
      //   data: ({
      //     dataList: this.saveTableData,
      //     ...this.apiParam
      //   })
      // headers: { 'Content-Type': 'application/x-www-form-urlencoded' } // 这个必须加上
      // })
      //   .then(function (response) {
      //     this.saveLoading = false
      //     this.loading = false
      //     console.log(response)
      //   })
      //   .catch(function (error) {
      //     this.saveLoading = false
      //     this.loading = false
      //     console.log(error)
      //   })
      saveExcelData(this.saveTableData, this.apiUrl, this.apiParam).then(res => {
        let data = res
        if (data.errcode === 0) {
          this.saveLoading = false
          this.loading = false
          this.$tips.success('导入成功')
          this.$emit('success')
          this.initUpload()
        } else {
          this.saveLoading = false
          this.loading = false
          this.$tips.success('导入失败：' + res.errmsg)
        }
      }).catch(ret => {
        this.saveLoading = false
        this.loading = false
        console.log('错误：' + ret)
      })
    },
    // 验证文件
    handleBeforeUpload (file) {
      // 验证文件是否合法
      const fileExt = file.name.split('.').pop().toLocaleLowerCase()
      if (fileExt === 'xlsx' || fileExt === 'xls') {
        this.readFile(file)
        this.file = file
      } else {
        this.$tips.warning('文件：' + file.name + '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。')
      }
      return false
    },
    // 读取数据
    readFile (file) {
      // 通过 new FileReader 读取文件
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onloadstart = e => {
        this.loading = true
        this.showProgress = true
      }
      // 错误处理
      reader.onerror = e => {
        this.$tips.error('文件读取出错')
      }
      // 正确处理
      reader.onload = e => {
        const data = e.target.result
        const { header, results } = excel.read(data, 'array')
        let tableTitle = []
        header.forEach(item => {
          tableTitle.push({ label: item, value: item })
        })
        this.selectFieldAfterAction(tableTitle, results)
        this.$tips.success('文件读取成功')
      }
    },
    // 查看数据
    selectFieldAfterAction (headers, results) {
      // 数据拷贝
      this.tableData = [...results]
      this.tableData.splice(0, this.delRow) // 删除非导入行
      this.tableTitle = headers
      this.tableData.forEach((item, index) => {
        item.cellClassName = {}
        // 对数据进行校验
        // 对预览数据唯一值进行校验
        if (this.uniKey) {
          if (repeatArr[item[this.uniKey]]) {
            item.cellClassName[this.uniKey] = 'trouble-cell-repeat'
            this.nextBtnDisabled = true
          } else {
            repeatArr[item[this.uniKey]] = true
          }
        }
        let result = this.autoValidate(item, index)
        item = result.item
        if (result.error === true) {
          this.nextBtnDisabled = true
        }
        // 数据转码
        this.saveTableData.push(this.autoHandle({
          ...item
        }))
      })
      this.loading = false
    },
    // 格式校验框架
    autoValidate (item, index) {
      let error = false
      // 校验数据
      let rtn = this.validateData(item, error, this.troubleName)
      if (rtn) {
        let num = index + 1
        console.log('错误的数据在' + num + '行', item)
      }
      return { error: rtn, item: item }
    },
    // 数据处理
    autoHandle (item) {
      this.handleData(item)
      return item
    },
    // 错误问题样式
    cellStyle ({ row, rowIndex, column, columnIndex }) {
      if (row.cellClassName[column.property]) {
        if (row.cellClassName[column.property] === this.troubleName) {
          return {
            color: this.troubleColor.cellColor,
            backgroundColor: this.troubleColor.cellBgColor
          }
        } else if (row.cellClassName[column.property] === 'trouble-cell-repeat') {
          return {
            color: this.troubleColor.cellRepeatColor,
            backgroundColor: this.troubleColor.cellRepeatBgColor
          }
        }
      }
    },
    // 下载样例
    downloadSample () {
      window.open(this.excelAddress)
    }
  }
}
</script>
//  ************************************************************
//  * 方法定义	                       *      描述
//  * abort():void	                   *  终止文件读取操作
//  * readAsArrayBuffer(file):void     *  异步按字节读取文件内容，结果用ArrayBuffer对象表示
//  * readAsBinaryString(file):void	   *  异步按字节读取文件内容，结果为文件的二进制串
//  * readAsDataURL(file):void	       *  异步读取文件内容，结果用data:url的字符串形式表示
//  * readAsText(file,encoding):void	 *  异步按字符读取文件内容，结果用字符串形式表示
//  ************************************************************
//  * onabort	     * 当读取操作被中止时调用
//  * onerror	     * 当读取操作发生错误时调用
//  * onload	     * 当读取操作成功完成时调用
//  * onloadend	   * 当读取操作完成时调用,不管是成功还是失败
//  * onloadstart	 * 当读取操作将要开始之前调用
//  * onprogress	 * 在读取数据过程中周期性调用
//  ************************************************************
<style scoped>
.loadStyle {
  /* display: inline-flex; */
  text-align: left;
  margin-bottom: 10px;
}

.box1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-align: right;
  /* float: right; */
}
a {
  color: #ffffff;
  display: inline-block;
  width: 150px;
  padding: 5px;
  cursor: pointer;
  border-radius: 1rem;
  text-align: center;
}

a[data-type="mr"] {
  background: #168de2;
}
</style>
